<script setup lang="ts">
import { ref,provide } from 'vue';
const props =defineProps<{
	text?:{
		type: string,
		default: '未命名'
	}
}>()
const text = ref(props.text)
</script>

<template>  		
	<div class="browser-content">
		<div class="toolbar">
			<div class="btn">←</div>
			<div class="btn">→</div>
			<div class="btn">↻</div>
			<input type="text" value="http://www.baidu.com"/>
			<div class="btn">➡️</div>
			<div class="btn">...</div>			
		</div>
		<div class="content">
			<div class="head">
				<div>新闻</div>
				<div>hao123</div>
				<div>地图</div>
				<div>贴吧</div>
				<div>视频</div>
				<div>图片</div>
				<div>文库</div>
				<div>更多</div>
			</div>
			<div class="body">
				<div class="icon"></div>
				<div class="search">
					<input type="text" placeholder="百度一下，你就知道"/>
					<div class="btn">百度一下</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>

		.browser-content{
			width: 100%;
			height: 100%;
			font-size: 1em;
		}
		.browser-content .toolbar{
			width: 100%;
			height: 2em;
			display: flex;
			margin:1em 0;
			font-size: 1.5em;
			
		}
		.browser-content .toolbar .btn{
			width: 2em;
			height: 2em;
			/* background-color: #ccc; */
			margin: 0 0.5em;			
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 5px;
			font-weight: bold;
		}
		.browser-content .toolbar .btn:active{
			background-color: #aaa
		}
		.browser-content .toolbar .btn:hover{
			background-color: #ccc;
		}
		.browser-content .toolbar input{
			flex:1;
			height: 100%;
			border: 1px solid #ccc;
			border-radius: 5px;
			padding: 1em 1em;
			font-size: 1.2em;
		}
		.browser-content .toolbar input:active{
			border:0
		}
		.browser-content .content{
			width: 100%;
			height: calc(100% - 3em);
			background-color: #fff;
			/* background-color: rgb(141, 186, 199); */
		}

		.browser-content .content .head{
			width: 100%;
			height: 5em;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			/* border-bottom: 1px solid #ccc; */
			/* padding: 3em; */
			background-color: #22222280;
			color: white;
		}
		.browser-content .content .head div{
			margin: 0 1em;
			font-size: 1.5em;
		}
		.browser-content .content .head div{
			cursor: pointer;
		}
		.browser-content .content .head div:hover{
			color: #00f;
		}
		.browser-content .content .body{
			width: 100%;
			height: calc(100% - 2em);
			display: flex;
			align-items: start;
			justify-content: center;
		}
		/* .browser-content .content .body .icon{
			width: 10em;
			height: 10em;
			background-color: #fff;
			border-radius: 50%;
			margin: 1em;
		} */
		.browser-content .content .body .search{
			width: 50%;
			/* width: 30em; */
			display: flex;
			font-size: 1.7em;
			margin-top: 5em;
		}
		.browser-content .content .body .search input{
			width: 70%;
		    /* line-height: 5em; */
			border: 0.1em solid rgb(78, 110, 242);
			border-radius: 0.6em  0 0 0.6em;
			font-size: 1em;
			padding: 0.7em 1em;
		}
		.browser-content .content .body .search .btn{
			width: 30%;
			/* line-height: 5em; */
			background-color: rgb(78, 110, 242);
			color: #fff;
			cursor: pointer;
			text-align: center;
			border-radius: 0 0.6em 0.6em 0;
			padding: 0.7em 1em;
		}
</style>